<template>
  <button @click="showMenu">显示菜单</button>
  <button @click="showName">显示姓名</button>
  <!-- <div class="wrapper">
    <div class="item" v-for="(item, index) in nowResult" :key="item">
      {{ item }}
    </div>
  </div> -->
  <div class="wrapper">
    <div v-show="showMenuBool" class="item" v-for="item in menu">
      {{ item }}
    </div>
    <div v-show="!showMenuBool" class="item" v-for="item in name">
      {{ item }}
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const showMenuBool = ref(true);

const menu = [
  "宫保鸡丁",
  "鱼香肉丝",
  "麻辣香锅",
  "回锅肉",
  "北京烤鸭",
  "红烧肉",
  "小龙虾",
  "酸菜鱼",
  "辣子鸡",
  "蒜蓉粉丝蒸虾",
];

const name = [
  "张三",
  "李四",
  "王五",
  "赵六",
  "孙七",
  "周八",
  "吴九",
  "郑十",
  "冯十一",
  "陈十二",
];

const nowResult = ref([]);
const showMenu = () => {
  nowResult.value = menu;
  showMenuBool.value = true;
};
const showName = () => {
  nowResult.value = name;
  showMenuBool.value = false;
};
</script>
<style></style>
